/*
 * @Author: your name
 * @Date: 2022-04-01 12:36:12
 * @LastEditTime: 2022-04-02 15:06:01
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \lalalal\src\views\finance\addIncomeModal\AddIncomeSearch.jsx
 */

import React, { useState } from 'react';
import './AddIncomeSearch.css'
import { Button, Input, Form, Space, Select, Row, Col, DatePicker, Tag } from 'antd';
import {
    CheckOutlined
} from '@ant-design/icons';
const AddIncomeSearch = () => {
    const { RangePicker } = DatePicker;
    const { CheckableTag } = Tag
    const [componentSize, setComponentSize] = useState('default');
    const [otherList, setOtherList] = useState([
        {
            id: 1,
            name: '有跟单'
        },
        {
            id: 2,
            name: '有订单'
        },
        {
            id: 3,
            name: '有合同'
        },
        {
            id: 4,
            name: '有售后'
        },
        {
            id: 5,
            name: '有附件'
        }
    ])

    //表单
    const onFormLayoutChange = ({ size }) => {
        setComponentSize(size);
    };

    //其他选项
    const [checkList, setCheckList] = useState([])
    const handleChange = (id, checked) => {
        const nextCheckList = checked ? [...checkList, id] : checkList.filter(t => t !== id)
        setCheckList(nextCheckList)
    }

    return (
        <div className='container-power-search'>
            <Form
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 10,
                }}
                //布局
                layout="horizontal"

                //表单默认值
                initialValues={{
                    size: componentSize,
                }}
                onValuesChange={onFormLayoutChange}
                size={componentSize}
            >
                <Row>
                    <Col span={8}>
                        <Form.Item name='number' label="编号" >
                            <Input />
                        </Form.Item>

                        <Form.Item name='job' label="职位" >
                            <Select>
                                <Select.Option value={"1"} disabled>请选择</Select.Option>
                                <Select.Option value={"2"}>超级管理员</Select.Option>
                                <Select.Option value={"3"}>张三</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name='url' label="网址" >
                            <Input />
                        </Form.Item>
                        <Form.Item name='lastDate' label="最后更新" >
                            <Space direction="vertical" size={12}>
                                <RangePicker />
                            </Space>
                        </Form.Item>
                        <Form.Item name='address' label="详细地址" >
                            <Input />
                        </Form.Item>
                        <Form.Item name='clietType' label="客户类型" >
                            <Select>
                                <Select.Option value={"1"} disabled>请选择</Select.Option>
                                <Select.Option value={"2"}>超级管理员</Select.Option>
                                <Select.Option value={"3"}>张三</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="商品类型" >
                            <Select style={{ width: '75px' }}>
                                <Select.Option value={"1"} disabled>请选择</Select.Option>
                                <Select.Option value={"2"}>超级管理员</Select.Option>
                                <Select.Option value={"3"}>张三</Select.Option>
                            </Select>
                            <Select style={{ width: '75px', marginLeft: '10px' }}>
                                <Select.Option value={"1"} disabled>请选择</Select.Option>
                                <Select.Option value={"2"}>超级管理员</Select.Option>
                                <Select.Option value={"3"}>张三</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name='saleman' label="业务员" >
                            <Select>
                                <Select.Option value={"1"} disabled>请选择</Select.Option>
                                <Select.Option value={"2"}>超级管理员</Select.Option>
                                <Select.Option value={"3"}>张三</Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item name='clientName' label="客户名称" >
                            <Input />
                        </Form.Item>
                        <Form.Item name='tel' label="手机号码" >
                            <Input />
                        </Form.Item>
                        <Form.Item name='isJob' label="所属行业" >
                            <Select>
                                <Select.Option value={"1"} disabled>请选择</Select.Option>
                                <Select.Option value={"2"}>默认账户</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name='isAddress' label="所属地区" >
                            <Select>
                                <Select.Option value={"1"} disabled>请选择</Select.Option>
                                <Select.Option value={"2"}>默认账户</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name='postcode' label="邮编" >
                            <Input />
                        </Form.Item>
                        <Form.Item name='clietLevel' label="客户级别" >
                            <Select>
                                <Select.Option value={"1"} disabled>请选择</Select.Option>
                                <Select.Option value={"2"}>默认账户</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name='sector' label="部门" >
                            <Select>
                                <Select.Option value={"1"} disabled>请选择</Select.Option>
                                <Select.Option value={"2"}>默认账户</Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item name='contact' label="联系人" >
                            <Input />
                        </Form.Item>
                        <Form.Item name='email' label="电子邮箱" >
                            <Input />
                        </Form.Item>
                        <Form.Item name='inputTime' label="录入时间" >
                            <Space direction="vertical" size={12}>
                                <RangePicker />
                            </Space>
                        </Form.Item>
                        <Form.Item name='qq' label="QQ" >
                            <Input />
                        </Form.Item>
                        <Form.Item name='customerSource' label="客户来源" >
                            <Select>
                                <Select.Option value={"1"} disabled>请选择</Select.Option>
                                <Select.Option value={"2"}>默认账户</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name='inputer' label="录入者" >
                            <Select>
                                <Select.Option value={"1"} disabled>请选择</Select.Option>
                                <Select.Option value={"2"}>默认账户</Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Form.Item label="其他" labelCol={{ span: '3' }} className='form-item'>
                    {
                        otherList.map(item => {
                            const { id } = item
                            // console.log(checkList);
                            // console.log(checkList.indexOf(id));
                            return <CheckableTag
                                key={id}
                                checked={checkList.indexOf(id) > -1}
                                onChange={checked => handleChange(id, checked)}
                            >
                                {item.name}
                                <CheckOutlined />
                            </CheckableTag>
                        })
                    }
                </Form.Item>
                <Row justify='center'>
                    <Col>
                        <Button type="primary" size='large' style={{ backgroundColor: '#6DC292' }} >
                            立即搜索
                        </Button>
                        <Button type="primary" size='large' style={{ backgroundColor: '#737373' }}>
                            清空条件
                        </Button>
                    </Col>
                </Row>
            </Form>

        </div>
    );
}

export default AddIncomeSearch;
